<template>
  <div class="w-90%" style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="{ height: height + 'px', 'overflow-y': 'hidden', fontSize: '16px' }"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeUnmount, computed, shallowRef, ref } from "vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IToolbarConfig } from "@wangeditor/editor";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  height: {
    type: Number,
    default: 500,
  },
});
const emit = defineEmits();
const valueHtml = computed({
  get() {
    return props.modelValue;
  },
  set(value: string) {
    emit("update:modelValue", value);
  },
});
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const res = ref({
  url: "",
  name: "",
});
const mode = "simple";

// const toolbarConfig = {
//   excludeMenus: ["emoticon", "video", 'bold'],
//   // insertKeys: {
//   //   index: 1, // 插入的位置，基于当前的 toolbarKeys
//   //   keys: ["header1", "header2", "header3", "header4", "header5"],
//   // },
// };

const toolbarConfig: Partial<IToolbarConfig> = {
  toolbarKeys: [
    // 菜单 key
    // 'headerSelect',
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    'uploadImage', // 上传图片
    'delIndent', // 缩进
    'indent', // 增进
    'deleteImage',//删除图片
    'divider', // 分割线
    'insertTable', // 插入表格
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'undo', // 撤销
    'redo', // 重做
    'clearStyle', // 清除格式
    'fullScreen' // 全屏
  ],
  // 工具栏配置
  excludeKeys: ["insertImage", "video", "insertVideo"],

};

const toBase64 = (file) => {
  let reader = new FileReader();
  reader.onloadend = function () {
    console.log("file.name", file.name);
    res.url = reader.result;
    res.name = file.name;
  };
  if (file) {
    reader.readAsDataURL(file);
  }
};

const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    // 配置上传服务器地址
    uploadImage: {
      // 小于该值就插入 base64 格式（而不上传），默认为 0
      base64LimitSize: 5 * 1024 * 1024, // 5kb
      // 单个文件的最大体积限制，默认为 2M
      // maxFileSize: 1 * 1024 * 1024, // 1M
      // // 最多可上传几个文件，默认为 100
      // maxNumberOfFiles: 5,
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ["image/*"],
      // 自定义上传
      async customUpload(file, insertFn) {
        toBase64(file);

        // 文件上传
        const formData = new FormData();
        formData.set("file", file);
        // 插入到富文本编辑器中，主意这里的三个参数都是必填的，要不然控制台报错：typeError: Cannot read properties of undefined (reading 'replace')
        insertFn(res.url, res.name, res.name);
      },
    },
  },
};

// onMounted(() => {
//   editorRef.value.disableMenu("video");
// });

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const { value } = editorRef;
  if (value === null) return;
  value.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  // console.log("uploadImage",editorRef.value.getAllMenuKeys());
};
</script>

<style lang="scss" scoped></style>
